<!-- 蒸汽/热水 -->
<template>
  <div v-loading="loading" class="energy_consume">
    <px-row :gutter="16">
      <px-col :span="8">
        <div class="lf-wrap">
          <div class="black">
            <modelTitle :title="'费用总览'" />
            <div class="water-fee-wrap">
              <div class="water-fee-wrap-item">
                <div class="top">
                  <CostIcon class="cost-icon" />
                  <div class="top-rt">
                    <div class="text">蒸汽费用合计</div>
                    <div>{{ resData?.steamSummary }}<span>万元</span></div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-lf">
                    <div class="text">同期</div>
                    <div>{{ resData?.steamSummaryYoyValue !== null ? resData?.steamSummaryYoyValue : "-" }}万元</div>
                  </div>
                  <div class="item-rt">
                    <div class="text">同比</div>
                    <div>{{ resData?.steamSummaryYoy !== null ? resData?.steamSummaryYoy + "%" : "-" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-lf">
                    <div class="text">上期</div>
                    <div>{{ resData?.steamSummaryMomValue !== null ? resData?.steamSummaryMomValue : "-" }}万元</div>
                  </div>
                  <div class="item-rt">
                    <div class="text">环比</div>
                    <div>{{ resData?.steamSummaryMom !== null ? resData?.steamSummaryMom + "%" : "-" }}</div>
                  </div>
                </div>
              </div>
              <div class="water-fee-wrap-item">
                <div class="top">
                  <CostIcon class="cost-icon" />
                  <div class="top-rt">
                    <div class="text">热水费用合计</div>
                    <div>
                      <span>{{ resData?.hotSummary !== null ? resData?.hotSummary : "-" }}</span>
                      万元
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-lf">
                    <div class="text">同期</div>
                    <div>{{ resData?.hotSummaryYoyValue !== null ? resData?.hotSummaryYoyValue : "-" }}万元</div>
                  </div>
                  <div class="item-rt">
                    <div class="text">同比</div>
                    <div>{{ resData?.hotSummaryYoy !== null ? resData?.hotSummaryYoy + "%" : "-" }}</div>
                  </div>
                </div>
                <div class="item">
                  <div class="item-lf">
                    <div class="text">上期</div>
                    <div>{{ resData?.hotSummaryMomValue !== null ? resData?.hotSummaryMomValue : "-" }}万元</div>
                  </div>
                  <div class="item-rt">
                    <div class="text">环比</div>
                    <div>{{ resData?.hotSummaryMom !== null ? resData?.hotSummaryMom + "%" : "-" }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="black mg-top-16">
            <modelTitle :title="'蒸汽、热水占比'" />
            <btnImageAndData
              v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'"
              :exportData="Boolean(false)"
              class="btn"
              @exportChange="val => handlerExport(val, '', 'ratioChartRef')"
            />
            <div ref="ratioChartRef" class="chart-wrap" />
          </div>
        </div>
      </px-col>
      <px-col :span="16">
        <div class="rt-wrap">
          <modelTitle :title="'费用趋势'" />
          <btnImageAndData v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'" class="btn" @exportChange="val => handlerExport(val, 'line', 'trendChartRef')" />
          <!-- <px-button v-has="'ALL_ENERGY_COST_SUPPLY_DOWNLOAD'" class="btn-wrap" @click="handleExport('line')">导出</px-button> -->
          <div ref="trendChartRef" class="chart-wrap" />
        </div>
      </px-col>
    </px-row>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import { getHotSteamAPI } from "@/api/energy/supplyCost";
import { drawStackingLineChart, drawPieChart, drawStackingBarChart } from "@/views/common/energy/cost/supplyCost/utils";
import CostIcon from "@/assets/svg/energy/cost.svg?component";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import btnImageAndData from "@/views/common/energy/components/btnImageAndData/index.vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({
      timeType: "Monthly",
      factory: "",
      timeRange: []
    }),
    required: true
  }
});

const trendChartRef = ref();
const ratioChartRef = ref();

const state = reactive({
  loading: false,
  resData: {}
});
const { loading, resData } = toRefs(state);

let chartObj = {};

// 查询
const getData = async () => {
  try {
    state.loading = true;
    const p = props.queryParams;
    const params = {
      dimension: p.timeType === "Monthly" ? "M" : "Y",
      startDate: p.timeRange.length > 0 ? p.timeRange[0] : "",
      endDate: p.timeRange.length > 0 ? p.timeRange[1] : "",
      level: p.factory
    };
    const res = await getHotSteamAPI(params);
    state.resData = res;
    nextTick(() => {
      if (res.costRatio) {
        chartObj.ratioChartRef = drawPieChart(ratioChartRef.value, res.costRatio);
      }
      if (res.costTrend?.xaxis) {
        chartObj.trendChartRef = drawStackingBarChart(trendChartRef.value, res.costTrend?.xaxis, res.costTrend?.yaxis);
      }
    });
  } catch (err) {
    console.log(err);
  } finally {
    state.loading = false;
  }
};

const handleExport = val => {
  let params = state.resData;
  params.type = val;
  proxy.download("post", "/energy/energyCost/exportSupplyHotSteam", params, "供给费用-蒸汽热水.xlsx");
};

defineExpose({
  getData
});
// 导出方法
const handlerExport = (val1, val2, val3) => {
  if (val1 === "data") {
    let params = state.resData;
    params.type = val2;
    proxy.download("post", "/energy/energyCost/exportSupplyHotSteam", params, "供给费用-蒸汽热水.xlsx");
  } else {
    let myChart = chartObj[val3];
    if (!myChart) return;
    // 获取Base64图片数据
    const imgUrl = myChart.getDataURL({
      type: "png",
      pixelRatio: 2,
      backgroundColor: "#fff"
    });
    // 创建并触发下载链接
    const link = document.createElement("a");
    link.href = imgUrl;
    link.download = "chart.png";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/common/energy/cost/supplyCost/scss/common.scss");

.lf-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.water-fee-wrap {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-top: 26px;

  .water-fee-wrap-item {
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      flex: 1;

      .top-rt {
        margin-left: 12px;
      }
    }

    .item {
      display: flex;
      flex: 1;
      justify-content: space-between;
      margin-top: 16px;
    }
  }
}

.rt-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 24px;
  background: #fff;
  border-radius: 4px;

  .chart-wrap {
    flex: 1;
    margin-top: 26px;
  }
}
</style>
